import React, { ComponentType, FC } from 'react';

import { AppStateProvider } from '@libs/common/context/app-state/app-state.provider';

import { HeaderOption, PageInfo } from '../../types';
import { WindowScriptProps } from '../html-tags';
import HtmlBody from './HtmlBody';
import { HeadProps, HtmlHead } from './HtmlHeader';

interface HtmlStructureProps {
    bodyElement: ComponentType;
    headOption: HeadProps;

    headerData?: HeaderOption;
    initData: any;

    pageInfo?: PageInfo;

    windowScripts?: WindowScriptProps[];
}

const HtmlStructure: FC<HtmlStructureProps> = (props) => {
    const BodyEl = props.bodyElement;

    return (
        <AppStateProvider values={{ initData: props.initData, headerData: props.headerData }}>
            <html dir={props.pageInfo?.dir} lang={props.pageInfo?.lang}>
                <HtmlHead {...props.headOption} {...props.pageInfo} />
                <HtmlBody.HtmlBody
                    initData={props?.initData}
                    headerData={props.headerData}
                    windowScripts={props.windowScripts}
                >
                    <BodyEl data-content />
                </HtmlBody.HtmlBody>
            </html>
        </AppStateProvider>
    );
};

HtmlStructure.displayName = 'HtmlStructure';

HtmlStructure.defaultProps = {
    pageInfo: {
        lang: 'zh-CN',
        dir: 'ltr',
        charset: 'utf-8',
        viewport: 'width=device-width, initial-scale=1, viewport-fit=cover, minimal-ui',
        seo: {
            title: 'Dome',
            description: 'what ever you want to find work, working now, even entertainment.',
            keywords: 'resume,coding tools,coding question bank',
        },
    },
};

export { HtmlStructure };
